//照片上传
import { View, Button, Form, Image } from "@tarojs/components";
import "./index.scss";
import React, { useState, useEffect } from "react";
import Taro, { getStorageSync } from "@tarojs/taro";
import store from "../../store";
let Photo = () => {
  let [cardfront, setCardfront] = useState("");
  let [cardreverse, setCardreverse] = useState("");
  let [license, setLicense] = useState("");
  let [food, setFood] = useState("");
  const [userImg, setUserImg] = useState("");
  useEffect(() => {
    if (Taro.getStorageSync("userImg")) {
      setUserImg(Taro.getStorageSync("userImg"));
    }
  }, []);
  let submit = function(e) {
    let data = [cardfront, cardreverse, license, food];
    let state = false;
    state = data.every(i => {
      return i != "";
    });
    if (!state) {
      Taro.showToast({
        title: "您有照片未上传!",
        icon: "error",
        duration: 2000
      });
    } else {
      //这里判断邀请码是否错误
      store.s_wh.setImgMeans(data);
      Taro.navigateTo({
        url: "./means"
      });
    }
  };
  let reset = function(e) {
    Taro.navigateTo({
      url: "./datum"
    });
  };
  let Mesimg = i => {
    if (i.item) {
      return <Image src={i.item} className="img_button" />;
    }
    return <Button className="img_button">+</Button>;
  };
  return (
    <View className="photo">
      <View className="tit">
        <View>照片上传</View>
        <View>
          <Image src={userImg}></Image>
        </View>
      </View>
      <View className="hint">照片格式为JPG或PNG，不超过2M，仅用于资料审核</View>
      <View className="cont">
        <View
          className="up"
          onClick={() => {
            Taro.chooseImage({
              count: 1, // 默认9
              sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
              success: function(res) {
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                setCardfront(res.tempFilePaths[0]);
              }
            });
          }}
        >
          <View>身份证正面</View>
          <Mesimg item={cardfront}></Mesimg>
        </View>
        <View
          className="up"
          onClick={() => {
            Taro.chooseImage({
              count: 1, // 默认9
              sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
              success: function(res) {
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                setCardreverse(res.tempFilePaths[0]);
              }
            });
          }}
        >
          <View>身份证反面</View>
          <Mesimg item={cardreverse}></Mesimg>
        </View>
        <View
          className="up"
          onClick={() => {
            Taro.chooseImage({
              count: 1, // 默认9
              sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
              success: function(res) {
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                setLicense(res.tempFilePaths[0]);
              }
            });
          }}
        >
          <View>营业执照</View>
          <Mesimg item={license}></Mesimg>
        </View>
        <View
          className="up"
          onClick={() => {
            Taro.chooseImage({
              count: 1, // 默认9
              sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
              success: function(res) {
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                setFood(res.tempFilePaths[0]);
              }
            });
          }}
        >
          <View>食品卫生许可</View>
          <Mesimg item={food}></Mesimg>
        </View>
      </View>
      <Form onSubmit={submit} onReset={reset}>
        <View className="but">
          <Button form-type="reset">上一步</Button>
          <Button form-type="submit">下一步</Button>
        </View>
      </Form>
    </View>
  );
};
export default Photo;
